<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    父元素：<input type="text" name="fatherName" v-model="provinceValue">
    <!-- <SonComponent 
      @updateName="username=$event"
      :fatherValue="username"
    />

    子组件：<SonSelect 
      :provinces="provinces" 
      @updateProvince="printProvince"
      @changeGender="printGender"
      @changeHobby="printHobby"
      :gender="gender"
      :hobby="hobby"
      /> -->

      <!-- 简化子组件绑定 v-model -->
      <!-- <SonModel v-model="provinceValue" :provinces="provinces" /> -->

      <!-- 实例 封装 input 组件 -->
      <!-- <son-input v-model="username"></son-input> -->

      <!-- 使用.sync 封装Input 组件 -->
      <son-sync :username.sync="username"></son-sync>
    
  </div>
</template>

<script>
// import SonComponent from './components/SonComponent.vue'
// import SonSelect from './components/SonSelect.vue'
// import SonModel from './components/SonModel.vue'
// import SonInput from './components/SonInput.vue'
import SonSync from './components/SonSync.vue'

export default {
  name: 'App',
  components: {
    // SonComponent,
    // SonSelect,
    // SonModel,
    // SonInput,
    SonSync
  },
  data() {
    return {
      username: '',
      provinces: [
        {id: 101, name: '北京'},
        {id: 102, name: '上海'},
        {id: 103, name: '广州'},
        {id: 104, name: '重庆'},
      ],
      gender: 0,
      hobby: '',
      provinceValue: 101
    }
  },
  methods: {
    printProvince(e) {
      console.log(e)
    },
    printGender(e) {
      console.log(e)
    },
    printHobby(e) {
      console.log(e)
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
